body {
	overflow: hidden;
	user-select: none;
	-moz-user-select: none;
	color: #fff;
	-webkit-user-select: none;
	transition: 0.3s;
}

@font-face {
	font-family: font1;
	src: url(../font/font.woff);
}

@font-face {
	font-family: font2;
	src: url(../font/ckhans-fonts-gravitica-light-demo.otf);
}

@font-face {
	font-family: gf;
	src: url(../font/gf.ttf);
}

/* daily container start */

.mainContainer {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0;
	transition: 0.3s;
	transition: .5s;
	background-image: linear-gradient(150deg, rgba(10, 69, 117, 0.884), rgba(121, 15, 15, 0.885));
}

.mainContainer>.linearContainer {
	position: absolute;
	width: 35vh;
	height: 94.5vh;
	top: 2.7vh;
	left: 2.6vh;
	border-radius: 1vh;
	background-image: linear-gradient(rgba(211, 26, 26, 0.848), rgba(211, 26, 26, 0.148));
}

@font-face {
	font-family: fonttitle;
	src: url(../font/wss.ttf);
}

.linearContainer>.title {
	position: absolute;
	font-family: fonttitle;
	font-size: 3.5vh;
	font-weight: 600;
	top: 2vh;
	left: 2.5vh;
	text-transform: uppercase;
	/* font-weight: 600; */
}

.linearContainer>.subtitle {
	position: absolute;
	font-family: fonttitle;
	font-size: 1.6vh;
	letter-spacing: .5vh;
	font-weight: 00;
	top: 6vh;
	left: 2.5vh;
	text-shadow: 6px 3px 10px rgba(0, 0, 0, 0.651);
	/* font-weight: 600; */
}

.linearContainer>.desc {
	position: absolute;
	font-family: fonttitle;
	font-size: 1.4vh;
	/* letter-spacing: .5vh; */
	font-weight: 600;
	top: 8.3vh;
	left: 2.5vh;
	width: 31vh;
	/* text-shadow: 6px 3px 10px rgba(0, 0, 0, 0.651); */
	/* font-weight: 600; */
}

.linearContainer>.image {
	position: absolute;
	left: -9vh;
	top: 16.3vh;
	filter: blur(1vh);
	width: 55vh;
	transition: .3s;
}

.linearContainer>.image2 {
	position: absolute;
	left: 2vh;
	top: 37.5vh;
	/* filter: blur(.6vh); */
	width: 35vh;
	transition: .3s;
}

.linearContainer:hover>.image2 {
	filter: blur(.1vh);
}

.bgph {
	width: 33vh;
	position: absolute;
	right: -8vh;
	top: 72vh;
	transform: rotate(50deg);
	filter: blur(.7vh);
}

.bgph2 {
	width: 28vh;
	position: absolute;
	right: -6vh;
	top: 76vh;
	transform: rotate(10deg);
	/* filter: blur(.7vh); */
}

.mainContainer>.rewardsContainer {
	position: absolute;
	width: 85vh;
	height: 78vh;
	top: 18.95vh;
	left: 42.6vh;
	border-radius: 1vh;
	overflow: auto;
}

.rewardsContainer>.rewardBox {
	width: 20vh;
	height: 25vh;
	float: left;
	margin: .25vw;
	background-color: #212231;
	border-radius: 1.5vh;
	box-shadow: inset 0px 0px 50px #4648688f;
	border-radius: 1vh;
	display: flex;
	transition: .3s;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.rewardsContainer>.rewardBox:hover {
	background-color: #212231;
	border-radius: .8vh;
	box-shadow: inset 0px 0px 50px #4648684d;
}

.rewardBox > .icon {
	width: 11vh;
	height: 11vh;
	margin-top: -8vh;
	filter: drop-shadow(0 0 1.75rem rgba(255, 255, 255, 0.362));
}

.rewardBox > .title {
	position: absolute;
	font-family: fonttitle;
	font-size: 1.6vh;
	font-weight: 600;
	letter-spacing: .1vh;
	margin-top: 6.5vh;
	text-shadow: 0px 0px 20px white;
}

.rewardBox > .desc {
	position: absolute;
	font-family: fonttitle;
	font-size: 1.1vh;
	width: 17vh;
	font-weight: 500;
	letter-spacing: .1vh;
	margin-top: 12vh;
	text-align: center;
}

.rewardBox > .button {
	position: absolute;
	font-family: fonttitle;
	font-size: 1.1vh;
	font-weight: 600;
	/* letter-spacing: .1vh; */
	text-transform: uppercase;
	margin-top: 19.5vh;
	text-shadow: 0px 0px 50px white;
	padding: .5vh 1vh .5vh 1vh;
	border-radius: 30vh;
	border: 1px solid transparent;
	transition: .6s;
	font-weight: 600;
}

.rewardBox > .button:hover {
	color: rgba(199, 199, 199, 0.76);
	border: 1px solid rgba(199, 199, 199, 0.76);
}

.rewardBox > .rewarded {
	text-shadow: 0px 0px 20px greenyellow;
	filter: drop-shadow(0 0 1.75rem rgba(0, 255, 0, 0.362));
}

.rewardBox > .rewarded2 {
	color: greenyellow;
	text-shadow: 0px 0px 50px greenyellow;
}

.rewardBox > .rewarded2:hover {
	color: greenyellow;
	border: 1px solid transparent;
	cursor: not-allowed;
}

.rewardBox > .collect {
	text-shadow: 0px 0px 20px rgb(68, 0, 255);
	filter: drop-shadow(0 0 1.75rem rgba(68, 0, 255, 0.362));
}

.rewardBox > .collect {
	color: rgb(68, 0, 255);
	text-shadow: 0px 0px 50px rgb(68, 0, 255);
}

.rewardBox > .collect:hover {
	color: rgb(68, 0, 255);
	border: 1px solid transparent;
	/* border: 1px solid rgba(68, 0, 255, 0.76); */
}

.rewardBox > .collect2:hover {
	color: rgb(68, 0, 255);
	border: 1px solid transparent;
	border: 1px solid rgba(68, 0, 255, 0.76);
}

.titleItems {
	position: absolute;
	top: 11vh;
	left: 43.1vh;
	font-family: fonttitle;
	font-size: 2vh;
}

.descItems {
	position: absolute;
	top: 13.5vh;
	left: 43.1vh;
	font-family: fonttitle;
	color: rgba(179, 179, 179, 0.753);
	font-size: 1.3vh;
	width: 40vh;
}

::-webkit-scrollbar {
	width: .4vh;
}

::-webkit-scrollbar-track {
	background-color: rgba(0, 0, 0, 0.223);
	border-radius: 10px;
}

::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.523);
	border-radius: 10px;
}

.extraContainer {
	position: absolute;
	width: 31vh;
	height: 78vh;
	top: 18.95vh;
	left: 132.6vh;
	border-radius: 1vh;
	overflow: auto;
	/* background-color: red; */
}

.titleExtra {
	position: absolute;
	top: 11vh;
	left: 132.6vh;
	font-family: fonttitle;
	font-size: 2vh;
}

.descExtra {
	position: absolute;
	top: 13.5vh;
	left: 132.6vh;
	font-family: fonttitle;
	color: rgba(179, 179, 179, 0.753);
	font-size: 1.3vh;
	width: 30vh;
}